<template>
  <div class="route add page">
    <div class="title">学校管理</div>
    <div class="from">
      <text-input v-model="school.name" :disable="true"  label="药店名" class="plane" color="#009C4E"></text-input>
      <text-input style="margin-top: 20px" :value="address" :disable="true" @click.native="showAddress"   label="地址" class="plane" color="#009C4E"></text-input>
      <select-txt v-if="showSel"  :options="users" :alias="userAlias"  :items="userItems"    label="选择用户" class="plane" color="#009C4E" ></select-txt>
      <!--      <select-txt   :options="schools" :alias="schoolAlias"  :items="schoolItems"    label="选择学校" class="plane" color="#F9A528" ></select-txt>-->
    </div>
    <div class="btn" @click="confirm">提交</div>
  </div>
</template>

<script>
import TextInput from '@/components/form/text-input'
import SelectTxt from '@/components/form/select-txt'
import { getSchool, addSchool } from '@/api/school'
import { showAlert } from '@/dialog'
import { addressData } from '@/util/area'
import { sTop } from '@/api/user'
import { mapState } from 'vuex'
import { LEVELS } from '@/const'
export default {
  created () {
    this.id = this.$route.query.id
    if (this.id) {
      getSchool(this.id).then(res => {
        this.school = res.data
        if (res.extra.user.length > 0) {
          this.userItems = res.extra.user.map(user => {
            return { text: user.name, value: user.id }
          })
        }
        // this.schoolItems = res.extra.school.map(school => {
        //   return { text: school.name, value: school.id }
        // })
      })
    }
    sTop().then(res => {
      this.users = res.data
    })
  },
  computed: {
    address () {
      return this.school.province + this.school.city + this.school.county
    },
    ...mapState({
      levelId: state => state.user.levelId
    }),
    showSel () {
      return this.levelId > LEVELS.BUS
    }
  },
  methods: {
    showAddress () {
      this.addressPicker = this.$createCascadePicker({
        title: '选择地址',
        data: addressData,
        onSelect: this.selectAddress
      })
      this.addressPicker.show()
    },
    selectAddress (value, index, text) {
      this.school.province = text[0]
      this.school.city = text[1]
      this.school.county = text[2]
    },
    confirm () {
      this.school.userIds = this.userItems.map(mp => mp.value)
      addSchool(this.school).then(res => {
        showAlert('操作成功').then(res => {
          this.$router.back()
        })
      })
    }
  },
  data () {
    return {
      school: {
        name: null,
        province: null,
        city: null,
        county: null,
        detail: null,
        remark: null
      },
      users: [],
      userAlias: {
        value: 'id',
        text: 'name'
      },
      userItems: [{}]
    }
  },
  components: {
    TextInput, SelectTxt
  }
}
</script>

<style scoped lang="stylus">
.route
  .title
    margin 15px 0
    dpr-font(18px)
    color #55545D
    display flex
    justify-content center
  .btn
    margin-top 20px
    background-color #009c4e
    border-radius 20px
    height 40px
    font-size 16px
    display flex
    align-items center
    justify-content center
    color white
</style>
